<template>
  <!-- <div :class="className"  /> -->
  <v-chart
    ref="echart"
    :options="polar"
    theme="macarons"
    autoresize
    :style="{ height: height, width: width }"
  />
</template>

<script>
// import echarts from 'echarts'
// import 'echarts/theme/macarons'
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "70vh"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    var colors = ["#3888fa", "#FF005A", "#675bba", "#000", "#FFcc00"];

    return {
      polar: {
        color: colors,

        // tooltip: {
        //   trigger: "none",
        //   axisPointer: {
        //     type: "cross"
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' +
            date.getHours() + ':' + date.getMinutes()
          },
          axisPointer: {
            animation: false,
            type: "cross"
          }
        },
        legend: {
          data: []
        },
        grid: {
          top: 50,
          left: 90,
          right: 20,
          bottom: 50
        },
        xAxis: {
          type: "time",
          // interval: 30,
          splitLine: {
            // show: false,
          }
        },
        yAxis: [
          {
            name: "上行流量",
            nameLocation: "center",
            nameTextStyle: {
              lineHeight: 140
            },
            axisLabel: {
              formatter: '{value} Mbps'
            },
            type: "value"
          }
        ],
        series: []
      }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        // console.log("watch...", this.chartData.length);
        this.flush();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.flush();
    });
  },
  beforeDestroy() {
    if (!this.$refs["echart"]) {
      return;
    }
    this.$refs["echart"].dispose();
  },
  methods: {
    flush: function() {
      this.$set(this.polar, "series", []);
      // this.$set(this.polar.legend, "data", []);
      // this.polar.legend.data = []

      // console.log(this.polar.legend.data);
      // console.log(this.polar.series);
      // Vue.set(this.polar.series., indexOfItem, newValue)
      // console.log(this.polar.series);
      const machines = this.chartData.map(e => e.name);
      this.$nextTick(() => {
        for (const mac of this.chartData) {
          const data = [];
          for (const time of mac.list) {
            data.push({
              name: time.timestamp,
              value: [
                time.timestamp,
                parseFloat((time.uploadspeed / 1024 / 1024).toFixed(2))
              ]
            });
          }
          this.polar.series.push({
            name: mac.name,
            type: "line",
            showSymbol: false,
            hoverAnimation: true,
            smooth: true,
            data: data
          });
        }

        this.polar.legend.data = machines;
      });
      this.$refs["echart"].mergeOptions(this.polar, true);
    }

    // initChart() {
    //   this.chart = echarts.init(this.$el, 'macarons')
    //   this.setOptions(this.chartData)
    // },
    // setOptions({ expectedData, actualData } = {}) {
    //   this.chart.setOption({
    //     xAxis: {
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //       boundaryGap: false,
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     grid: {
    //       left: 10,
    //       right: 10,
    //       bottom: 20,
    //       top: 30,
    //       containLabel: true
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross'
    //       },
    //       padding: [5, 10]
    //     },
    //     yAxis: {
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     legend: {
    //       data: ['expected', 'actual']
    //     },
    //     series: [{
    //       name: 'expected', itemStyle: {
    //         normal: {
    //           color: '#FF005A',
    //           lineStyle: {
    //             color: '#FF005A',
    //             width: 2
    //           }
    //         }
    //       },
    //       smooth: true,
    //       type: 'line',
    //       data: expectedData,
    //       animationDuration: 2800,
    //       animationEasing: 'cubicInOut'
    //     },
    //     {
    //       name: 'actual',
    //       smooth: true,
    //       type: 'line',
    //       itemStyle: {
    //         normal: {
    //           color: '#3888fa',
    //           lineStyle: {
    //             color: '#3888fa',
    //             width: 2
    //           },
    //           areaStyle: {
    //             color: '#f3f8ff'
    //           }
    //         }
    //       },
    //       data: actualData,
    //       animationDuration: 2800,
    //       animationEasing: 'quadraticOut'
    //     }]
    //   })
    // }
  }
};
</script>
